<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script type="text/javascript" src='./jquery-1.7.2.js'></script>
	<style type="text/css">
     	#box{
     		width: 200px;
     		height: 200px;
     		background: red;
     	}

	</style>
	<script>
    /*点击消失*/
  		/*$(document).ready(function(){
  		$("button").click(function(){
    	$("#box").hide();
  });
});*/
   /*淡进淡出*/
	/*$(document).ready(function(){
  	$("button").click(function(){
    $("#box").fadeToggle();
 		});
	});*/


	$(document).ready(function(){
  	$("button").click(function(){
    $("#box").slideDown();
	});
});




 	</script>
	
	

	
</head>
<body>

 <button>点击</button>
<div id="box" ></div>

</body>
</html>